<template>
  <i :class="[provider, iconName, iconScale, iconSpin, iconFixedWidth]"></i>
</template>

<style>
</style>

<script>
  export default{
    props: {
      provider: {
        type: String,
        default: 'fa'
      },
      font: String,
      scale: {
        type: String,
        default: ''
      },
      spin: Boolean,
      fixedWidth: Boolean,
      inverse: Boolean
    },
    computed: {
      iconName: function () {
        var self = this
        return self.font ? self.provider + '-' + self.font : ''
      },
      iconSpin: function () {
        var self = this
        return self.provider === 'fa' && self.spin ? 'fa-spin' : ''
      },
      iconScale: function () {
        var self = this
        return self.provider === 'fa' && self.scale ? 'fa-' + self.scale : ''
      },
      iconFixedWidth: function () {
        var self = this
        return self.provider === 'fa' && self.fixedWidth ? 'fa-fw' : ''
      },
      iconInverse: function () {
        var self = this
        return self.provider === 'fa' && self.inverse ? 'fa-inverse' : ''
      }
    }
  }
</script>
